<template>
	<view>
		<!-- 页头 -->
		<view class="header bg-gradual-blue" :style="{'padding-top': menuButtonTop}">
			<!-- <view class="u-flex" style="justify-content: left;">
				<image src="/static/images/logo-white.png" mode="heightFix" :style="{'height':logoHeight,'weight':logoHeight}"></image>
				<text class="u-font-36 bold-txt u-p-l-6">猿哥</text>
			</view> -->
			<view class="u-text-center u-p-t-60 u-p-b-30 u-flex">
				<text class="u-font-40 u-flex-1 u-text-left">小哥作业数据</text>
				<view class="u-p-t-20"><text class="u-font-24">数据更新于：{{time}}</text></view>
			</view>
			<view class="filter-bar u-flex">
				<view class="item">
					<!-- <picker @change="" :value="storeType" :range="mystorelist" range-key="packstationname"> -->
						<view>
							<text class="u-p-l-4 u-p-r-10 u-font-24">作业数据来自：{{userdetail.name}}</text>
							<!-- <u-icon name="arrow-down" color="#fff" size="20"></u-icon> -->
						</view>
					<!-- </picker> -->
				</view>
				<view class="u-flex-1"></view>
				<view class="item u-m-r-0">
					<picker @change="timeConfirm" :value="timeType" :range="timeList" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{timeList[timeType].label}}</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</picker>
					<u-calendar v-model="customTime" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarChange"></u-calendar>
				</view>
			</view>
			<!-- 自定义时间 -->
			<view class="u-flex u-p-t-10" v-if="timeType == 9">
				<view class="u-flex-1"><text class="u-font-24">查询时间范围：</text></view>
				<view><text class="u-font-24">{{startDate}} 至 {{endDate}}</text></view>
			</view>
		</view>
		<!-- 数据展示 -->
		<view class="content" style="margin-top: -120rpx;">
			<view v-if="!loading" style="margin-top: -26rpx;">
				<work-data ref="workData" :param="params"></work-data>
			</view>
			<view class="loading-box" v-else>
				<u-loading mode="circle" color="#10beca" size="60"></u-loading>
			</view>
		</view>
		<!-- 底部菜单 -->
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import tabbar from '../../components/tabbar/tabbar.vue'
	import workData from '../../components/statistics/workData.vue'
		
	export default {
		components:{
			tabbar,
			workData
		},
		data() {
			return {
				loading: true,
				menuButtonTop: '44px',
				logoHeight: '32px',
				// 筛选条件
				key: "",
				customTime: false,
				time: '',
				timeType: 3,
				startDate: '',
				endDate: '',
				timeChooseShow: false,
				timeList: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '今日'
					},
					{
						value: 2,
						label: '昨日'
					},
					{
						value: 3,
						label: '本月'
					},
					{
						value: 4,
						label: '上月'
					},
					{
						value: 5,
						label: '本季度'
					},
					{
						value: 6,
						label: '上季度'
					},
					{
						value: 7,
						label: '本年'
					},
					{
						value: 8,
						label: '上年'
					},
					{
						value: 9,
						label: '自定义'
					}
				],
				params:{},//发送的参数
			}
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				franchiseId: state => state.franchiseId,
			}),
			...mapState('brother',{
				online: state => state.online,
				brotherTrip: state => state.brotherTrip
			})
		},
		watch:{
			
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.logoHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
			// this.getStatisticsOption()
			this.sendParams()
		},
		methods: {
			// 选择时间类型
			timeConfirm(e) {
				this.timeType = e.detail.value
				if (this.timeType == 9) {
					this.customTime = true
				} else {
					this.sendParams()
				}
			},
			// 选择自定义时间范围
			calendarChange(e) {
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.sendParams()
			},
			// 
			//发送请求参数
			sendParams(){ 
				this.loading = true
				this.params = {
					endDate: this.endDate,
					startDate: this.startDate,
					timeType: this.timeType,
					franchiseId: this.franchiseId,
					brotherId: this.userdetail.id,
					// storeId: this.storeId,
					key: this.key
				}
				console.log('发送请求参数',this.params)
				this.time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
				setTimeout(()=>{
					this.loading = false
				},300)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading-box{
		height: 30vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	//页头
	.header {
		background-color: #fff;
		padding: 60rpx 30rpx 120rpx 30rpx;
		margin-bottom: 10rpx;
		padding-top: calc(22px + var(--status-bar-height));
		position: relative;
		border-bottom-right-radius: 60rpx;
	
		.head-bar {
			height: 44rpx;
		}
	}
	// 筛选
	.filter-bar {
		display: flex;
		color: #fff;
		// padding: 0 30rpx;
	
		// justify-content: space-between;
		.item {
			background-color: rgba(241, 241, 241, 0.32);
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			// margin-right: 10rpx;
		}
	}
</style>
